---
title: useMediaQuery
description: "`useMediaQuery`は、単一または複数のメディアクエリに一致するかどうかを検知するカスタムフックです。"
storybook: hooks-usemediaquery--basic
source: hooks/use-media-query
---

```tsx preview functional client
const large = useMediaQuery("(min-width: 1280px)")

return <Text>{large ? "larger than 1280px" : "smaller than 1280px"}</Text>
```

## 使い方

:::code-group

```tsx [package]
import { useMediaQuery } from "@yamada-ui/react"
```

```tsx [alias]
import { useMediaQuery } from "@/components/ui"
```

```tsx [monorepo]
import { useMediaQuery } from "@workspaces/ui"
```

:::

```tsx
const large = useMediaQuery("(min-width: 1280px)")
```
